<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:t="http://myfaces.apache.org/tomahawk"
		xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">

	<ui:composition template="/WEB-INF/templates/template.xhtml">
	<ui:define name="content">
		<a4j:form> 
				<div class="grid-6-12">
					<h:outputLabel class="form-lbl"  value="Nome"/>
					<h:inputText id="nomeCliente"  styleClass="form-txt" value="#{clienteBean.cliente.nome}" ></h:inputText>
				</div>
				
				<div class="grid-3-12" >
					<h:outputLabel class="form-lbl" value="CPF"/>
					<h:inputText id="cpfCliente" styleClass="form-txt" value="#{clienteBean.cliente.cpf}" ></h:inputText>
				</div>
				
				<div class="grid-3-12">
					<h:outputLabel class="form-lbl" value="CNPJ"></h:outputLabel>
					<h:inputText id="cnpfCliente" styleClass="form-txt" value="#{clienteBean.cliente.cnpj}" ></h:inputText>
				</div>
				
				<div class="grid-3-12">
					<h:outputLabel class="form-lbl" value="Tipo Contato"></h:outputLabel>
					<h:selectOneMenu id="comboBoxTipoContato"  value="#{clienteBean.tipoContato}" >
						<t:selectItems value="#{clienteBean.tiposContato}" var="contato" 	itemValue="#{contato.descricao}"	itemLabel="#{contato}" />
					</h:selectOneMenu>
				</div>
				<div class="grid-3-12">
					<h:outputLabel class="form-lbl" value="Contato"></h:outputLabel>
					<h:inputText id="contatoCliente" styleClass="form-txt" value="#{clienteBean.contatoCliente.contato}" ></h:inputText>
				</div>
				
				<a4j:outputPanel ajaxRendered="true">
				<div class="grid-2-12" style="padding-top: 22px">
					<a4j:commandButton style="width: 50px; height: 20px" value="Adicioar" action="#{clienteBean.addContato}" >
					</a4j:commandButton>
				</div>
			</a4j:outputPanel>
			<div class="field-clear"></div>

			<div style="border-top: 1px solid #d0d0d0; margin-top: 12px; padding-top: 12px">
				<a4j:outputPanel id="panel" ajaxRendered="true">
					<rich:dataTable style="width: 300px" id="idTableContato"
						var="contato" value="#{clienteBean.listContatos}">
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Tipo Contato" />
							</f:facet>
							<h:outputText value="#{contato.tipoContato}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Contato" />
							</f:facet>
							<h:outputText value="#{contato.contato}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">
								<h:outputText value="Remover" />
							</f:facet>
							<a4j:commandLink value="x" action="#{clienteBean.removerContato}" render="idTableContato">
								<f:setPropertyActionListener target="#{clienteBean.idContato}" value="#{contato.id}" />
							</a4j:commandLink>
						</rich:column>
					</rich:dataTable>
				</a4j:outputPanel>
			</div>

			<div class="field-clear"></div>
			<div class="grid-2-12">
				<h:commandButton styleClass="form-button" value="Salvar" action="#{clienteBean.salvarCliente}" ></h:commandButton>
			</div>				
				
	</a4j:form>
		
		
		<div style="border-top: 1px solid #d0d0d0; margin-top: 12px; padding-top: 12px">
		<h:form id="formListCliente" >
			<a4j:outputPanel id="panel" ajaxRendered="true">
				 <rich:dataTable style="width: 300px" id="clienteTable"  var="cliente" value="#{clienteBean.clientes}" >
					 <rich:column>
						<f:facet name="header">
							<h:outputText value="ID" />
						</f:facet>
						<h:outputText value="#{cliente.id}" />
					</rich:column>
					 <rich:column>
						<f:facet name="header">
							<h:outputText value="Nome" />
						</f:facet>
						<h:outputText value="#{cliente.nome}" />
					</rich:column>
					 <rich:column>
						<f:facet name="header">
							<h:outputText value="CPF" />
						</f:facet>
						<h:outputText value="#{cliente.cpf}" />
					</rich:column>
					 <rich:column>
						<f:facet name="header">
							<h:outputText value="CNPJ" />
						</f:facet>
						<h:outputText value="#{cliente.cnpj}" />
					</rich:column>
					<rich:column>
						<f:facet name="header">
							<h:outputText value="Remover" />
						</f:facet>
						<a4j:commandLink value="x" action="#{clienteBean.excluir}" render="clienteTable"  >
							 <f:setPropertyActionListener target="#{clienteBean.idCliente}" value="#{cliente.id}"/>  
						</a4j:commandLink>
					</rich:column>
				</rich:dataTable>
			</a4j:outputPanel>
			
		</h:form>
	</div>	
		
	</ui:define>
	</ui:composition>

</html>